import G6 from '@antv/g6'
G6.registerEdge('hvh', {
  draw(cfg, group) {
    const startPoint = cfg.startPoint
    const endPoint = cfg.endPoint
    const shape = group.addShape('path', {
      attrs: {
        stroke: '#333',
        path: [
          ['M', startPoint.x, startPoint.y],
          ['L', endPoint.x / 3 + (2 / 3) * startPoint.x, startPoint.y], // 三分之一处
          ['L', endPoint.x / 3 + (2 / 3) * startPoint.x, endPoint.y], // 三分之二处
          ['L', endPoint.x, endPoint.y]
        ]
      },
      name: 'path-shape'
    })
    return shape
  },
  afterDraw(cfg, group) {
    const shape = group.get('children')[0]
    const length = shape.getTotalLength()
    const startPoint = shape.getPoint(0)
    shape.animate(
      ratio => {
        const startLen = ratio * length
        const cfg = {
          lineDash: [startLen, length - startLen]
        }
        return cfg
      },
      {
        repeat: false,
        duration: 2000
      }
    )
    // 添加红色 circle 图形
    const circle = group.addShape('circle', {
      attrs: {
        x: startPoint.x,
        y: startPoint.y,
        fill: 'red',
        r: 3
      },
      // must be assigned in G6 3.3 and later versions. it can be any value you want
      name: 'circle-shape'
    })

    // 对红色圆点添加动画
    circle.animate(
      ratio => {
        // 每一帧的操作，入参 ratio：这一帧的比例值（Number）。返回值：这一帧需要变化的参数集（Object）。
        // 根据比例值，获得在边 path 上对应比例的位置。
        const tmpPoint = shape.getPoint(ratio)
        // 返回需要变化的参数集，这里返回了位置 x 和 y
        return {
          x: tmpPoint.x,
          y: tmpPoint.y
        }
      },
      {
        repeat: true, // 动画重复
        duration: 3000
      }
    ) // 一次动画的时间长度
  },

  setState(name, value, item) {
    const group = item.getContainer()
    const shape = group.get('children')[0]
    if (name === 'active') {
      if (value) {
        shape.attr('stroke', 'red')
      } else {
        shape.attr('stroke', '#333')
      }
    }
    if (name === 'selected') {
      if (value) {
        shape.attr('lineWidth', 3)
      } else {
        shape.attr('lineWidth', 1)
      }
    }
  }

})
